<!DOCTYPE html>
<html>

<head>
    <title>Example</title>
    <meta name="author" content="Adam Freeman">
    <meta name="description" content="A simple example">
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
    <style type="text/css">
        /* 百分比数值是根据包含块()内容盒子的宽度来计算的 */
        img {
            border: 4px solid black;
            background-color: lightgrey;
            /* 上 右 下 左 */
            margin: 2px;
            /* div的内容盒子的50% */
            height: 50%;
        }

        div {
            width: 75%;
            height: 200px;
            border: thin solid black;
        }

        #first{
            /* 元素调到盒子的哪一部分
                用到border-box 意思就是img元素的内容盒子+border盒子的宽度
                等于div的内容盒子的宽度的50%
            */
            box-sizing: border-box;
            width: 50%;
        }

        #second{
             /* 元素调到盒子的哪一部分 content-box 
             指定img的内容盒子高度继承div内容盒子的高度*/
            box-sizing: content-box;
        }
    </style>
</head>

<body>
    <div>
        <img id="first" src="../images/banana.png" alt="small banana">
        <img id="second" src="../images/banana.png" alt="small banana">
    </div>
</body>

</html>